<template>
  <div id="map" style="height: 400px; width: 100%;"></div>
</template>

<script>
export default {
  mounted() {
    window.initAMap = this.initMap;

    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=0c069d624168ea56415191392161489c&callback=initAMap';
    document.body.appendChild(script);
  },
  methods: {
    initMap() {
      const map = new AMap.Map("map", {
        zoom: 4,
        center: [104.195397, 35.86166], // 中国地图中心点坐标
        scrollWheel: false, // 禁止滚轮放大缩小地图
        dragEnable: false // 禁止拖拽地图
      });

      const lineArr = [
        { name: '北京', location: [116.407394, 39.904211] },
        { name: '上海', location: [121.473701, 31.230416] },
        { name: '兰州', location: [103.8343, 36.0611] } // 途径城市 - 兰州
      ];

      // 绘制曲线路径
      const curvePoints = lineArr.map(item => item.location);
      const curve = new AMap.BezierCurve({
        map: map,
        path: curvePoints,
        strokeColor: '#3366FF',
        strokeWeight: 2
      });

      // 添加城市标记
      lineArr.forEach(item => {
        new AMap.Marker({
          position: item.location,
          title: item.name,
          map: map
        });
      });
    }
  }
}
</script>

<style>
#map {
  width: 100%;
}
</style>
